<template>
    <div class="fullScreen">
        <span @click="fullScreen" :title="isFullscreen?'点击全屏':'退出全屏'">
            <i :class="['iconfont',isFullscreen?'icon-quanping':'icon-quxiaoquanping']"></i>
        </span>
    </div>
</template>
<script lang="ts" setup>
import { ref} from 'vue'
import screenfull from 'screenfull'
let isFullscreen = ref(true)

//全屏方法
const fullScreen =()=>{
    screenfull.toggle()
    isFullscreen.value = !isFullscreen.value;
}

//键盘事件
function KeyDown(e: { keyCode: number; returnValue: boolean; }) {
      if (e.keyCode === 122) {
        e.returnValue = false;
        fullScreen() //触发全屏的方法
      }
}
const screenFull =()=>{
     //监听f11事件
     window.addEventListener("keydown", KeyDown, true); 
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
      document.addEventListener("fullscreenchange", () => {
        isFullscreen.value = isFullscreen.value;//你要切换得图标使用得属性
      });
      document.addEventListener("mozfullscreenchange", () => {
        isFullscreen.value = !isFullscreen.value;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        isFullscreen.value = !isFullscreen.value;
      });
      document.addEventListener("msfullscreenchange", () => {
        isFullscreen.value = !isFullscreen.value;
      });
}
screenFull()
</script>
<style scoped>
.fullScreen:hover{
    cursor: pointer;
}
</style>